<template>
    <modal :show="show" :force=true :small=true>
        <div slot="header">
            <h4 class="modal-title">开个上房</h4>
        </div>
        <div class="modal-body">
            <div class="input-group">
                <span class="input-group-addon">雅室名曰</span>
                <input type="text" class="form-control" placeholder="可直接输入自己取的名字" v-model="roomName">
            </div>
            <div class="input-group">
                <span class="input-group-addon">江湖人称</span>
                <input type="text" class="form-control" placeholder="可直接输入自己取的名字" v-model="nickName">
            </div>
        </div>
        <div slot="footer">
            <button type="button" class="btn btn-primary center-block" @click="$emit('commit',{'roomName':roomName,'userName':nickName})">进入</button>
        </div>
    </modal>
</template>

<script>
import { mapGetters } from 'vuex'
import modal from 'vue-bootstrap-modal'
/* eslint-disable */
export default {
    components: {
        modal
    },
    data () {
        return {
            roomName: null,
            nickName: null
        }
    },
    computed: {
        ...mapGetters(['token']),
        show () {
            return !this.token;
        }
    },
    methods: {
        go () {
            this.$emit('commit',{roomName:this.roomName,userName:this.nickName});
        }
    },
    created () {
        //习惯性缓存this,方便在后面的异步中作为原始上下文
        var vm = this;
        //获得随机房间名称
        console.log(window.location.search);
        var oRoomName = window.location.search && window.location.search.replace('?room=','');
        if(!oRoomName)
        vm.$http.get('/rcn/poem').then((res)=>{
            vm.roomName = res.body.poem;
        });
        else vm.roomName = decodeURIComponent(oRoomName);
        //获得随机用户名称
        vm.$http.get('/rcn/name').then((res)=>{
            vm.nickName = res.body.name;
        });
        
    }
}
</script>